<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Ui\Block\Component\StepsWizard */
?>
    <div data-role="steps-wizard-main" class="steps-wizard" data-bind="scope: '<?= /* @escapeNotVerified */  $block->getComponentName()?>'">
        <div data-role="messages" class="messages"></div>

        <div data-role="steps-wizard-controls" class="steps-wizard-navigation">
            <ul class="nav-bar">
                <?php foreach ($block->getSteps() as $step) { ?>
                    <li data-role="collapsible" data-bind="css: { 'active': selectedStep() == '<?= /* @escapeNotVerified */  $step->getComponentName() ?>'}">
                        <a href="#<?= /* @escapeNotVerified */  $step->getComponentName() ?>"
                           data-bind="click: showSpecificStep">
                            <?= /* @escapeNotVerified */  $step->getCaption() ?>
                        </a>
                    </li>
                <?php } ?>
            </ul>
            <div class="nav-bar-outer-actions">
                <div class="action-wrap action-wrap-next" data-role="step-wizard-next">
                    <button type="button"
                            class="action-default action-primary action-next-step" data-bind="click: next">
                        <span><?= /* @escapeNotVerified */  __('Next') ?></span>
                    </button>
                </div>
                <div class="action-wrap action-wrap-prev" data-role="step-wizard-prev">
                    <button type="button"
                            class="action-default action-back-step"
                            data-bind="click: back, css: { 'disabled': disabled}">
                        <span><?= /* @escapeNotVerified */  __('Back') ?></span>
                    </button>
                </div>
                <div class="action-wrap" data-role="closeBtn">
                    <button type="button"
                            class="action-cancel action-tertiary" data-bind="click: close">
                        <span><?= /* @escapeNotVerified */  __('Cancel') ?></span>
                    </button>
                </div>
            </div>
        </div>
        <div data-role="steps-wizard-tab">
            <?php foreach ($block->getSteps() as $step) { ?>
            <div data-bind="visible: selectedStep() == $element.id"
                 class="content" id="<?= /* @escapeNotVerified */ $step->getComponentName() ?>"
                 data-role="content">
                <?= /* @escapeNotVerified */  $step->getContent() ?>
            </div>
            <?php } ?>
        </div>
    </div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "<?= /* @escapeNotVerified */  $block->getComponentName()?>": {
                            "component": "Magento_Ui/js/lib/step-wizard",
                            "initData": <?= /* @escapeNotVerified */  $this->helper("Magento\Framework\Json\Helper\Data")->jsonEncode($block->getInitData()) ?>,
                            "stepsNames": <?= /* @escapeNotVerified */  $this->helper("Magento\Framework\Json\Helper\Data")->jsonEncode($block->getStepComponents()) ?>
                        }
                    }
                }
            }
    }
</script>
